<template>
	<view class="w">
		<image class="top-bg" src="../../static/red_bg.png" />
		<view class="main">
			<view class="f-item">
				<view class="f-label">真实姓名</view>
				<input type="text" class="f-set" v-model="formItem.name" clearable height="92"
					placeholder="请输入您的真实姓名"></input>
			</view>
			<view class="f-item">
				<view class="f-label">手机号码</view>
				<input type="number" class="f-set" v-model="formItem.phone" maxlength="11" clearable height="92"
					placeholder="请输入您的联系电话"></input>

			</view>
			<view class="f-item">
				<view class="f-label">验证码</view>
				<input type="text" class="f-set" v-model="formItem.vcode" maxlength="4" clearable height="92"
					placeholder="请输入手机验证码"></input>
				<view class="get-code" @click="getCode">{{codeText}}</view>
			</view>
			<view class="f-item">
				<view class="f-label">车辆品牌</view>
				<input type="text" class="f-set" v-model="formItem.carDiy" maxlength="6" clearable height="92"
					placeholder="请输入您的车辆品牌"></input>
			</view>
			<view class="submit_btn" @click="onSubmit">提交</view>
			<view class="bottom_text">
				<text>点击即代表同意</text>
				<text style="color: #FF3341;" @click="jump" >《用户隐私政策》</text>
			</view>
		</view>
		<view class="bottom_box" >
			<image class="image1" src="../../static/my_img.png" mode=""></image>
			<p style="margin-top: 24rpx;" >融悦集团</p>
			<p>浙江易顺融资担保有限公司版权所有</p>
			<p>综合年化利率范围：6.5%-24%（单利）</p>
			<p style="color: #FF3729;">贷款资金由浙商银行等正规持牌放款机构提供</p>
		</view>

	</view>
</template>

<script>
	import {
		submitAssess
	} from '../../api/common';
import { getSmsVcode } from '../../api/login';
	export default {
		data() {
			return {
				formItem: {
					phone: '',
					vcode: '',
					name: '',
					carDiy: '',
				},
				codeText: '获取验证码',
				verifyCount: 60,
				sendVerifyState: false,
			}
		},
		onLoad(e) {},
		methods: {
			jump(){
				uni.navigateTo({
					url:'/pages/aboutMy/index?title=用户隐私政策&type=2'
				})
			},
			async onSubmit() {
				const values = await this.verifyForm([{
						name: 'name',
						message: '请输入真实姓名'
					},
					{
						name: 'phone',
						message: '请填写手机号'
					},
					{
						name: 'vcode',
						message: '请填写验证码'
					},
					{
						name: 'carDiy',
						message: '请填写车俩品牌'
					}
				], this.formItem);
				await submitAssess(values).then(res=>{
					uni.redirectTo({
						url:'/pages/success/index'
					});
				}).catch(err=>{
					return uni.showToast({
						title:err,
						icon:"none"
					})
				});
			},
			/**
			 * @param {Array} array 
			 * @param {Object} formValues
			 * @returns Promise
			 **/
			verifyForm(array, formValues) {
				return new Promise((resolve, reject) => {
					let result = true;
					for (let index = 0; index < array.length; index++) {
						const formItem = array[index];
						if (!formValues[formItem.name]) {
							result = false;
							uni.showToast({
								title: formItem.message,
								icon: 'none'
							});
							break;
						}
					}
					if (result) resolve({
						...formValues
					});
					else reject(false);

				})
			},
			async getCode() {
				const values = this.formItem;
				if (!values.phone) return uni.showToast({
					icon: 'none',
					title: '请输入手机号'
				});
				if (!(/^[1][3,4,5,7,8][0-9]{9}$/.test(values.phone))) return uni.showToast({
					icon: 'none',
					title: '请输入一个正确的手机号'
				});
				this.sendVerifyState = true;
				if (this.verifyCount === 60 && this.sendVerifyState) {
					let flag = setInterval(() => {
						this.verifyCount--;
						this.codeText = `${this.verifyCount}秒`;
						if (this.verifyCount === 1) {
							this.codeText = '获取验证码';
							this.sendVerifyState = false;
							this.verifyCount = 60;
							clearInterval(flag);
						}
					}, 1000);
					await getSmsVcode({
						phone: values.phone
					});
					uni.showToast({
						icon: 'none',
						title: '发送成功，请耐心等待短信'
					})
				} else {
					uni.showToast({
						title: '请耐心等待倒计时结束',
						icon: 'none'
					})
				}

			},
			codeChange(text) {
				this.codeText = text;
			},

		}
	}
</script>
<style>
	page {
		background-color: #F5F7FA;
	}
</style>
<style lang="scss">
	.bottom_text {
		margin: 24rpx 0;
		text-align: center;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #B8B8B8;
	}
	
	.w {
		.top-bg {
			width: 100%;
			height: 800rpx;
		}

		.main {
			width: 95%;
			border-radius: 24rpx;
			margin: auto;
			background-color: #fff;
			padding: 24rpx 0;

			.f-item {
				position: relative;
				margin-top: 24rpx;
				width: 95%;
				margin: auto;

				&~.f-item {
					margin-top: 48rpx;
				}

				.f-label {
					font-size: 28rpx;
					font-weight: 400;
					color: #292929;
					line-height: 28rpx;
				}

				.f-set {
					margin-top: 24rpx;
					padding: 0 24rpx !important;
					height: 92rpx;
					line-height: 92rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					border: 2rpx solid #EBEBEB;
					font-size: 28rpx;
					font-weight: 400;
					// width: 100%;


					&.uniActive {
						color: rgb(192, 196, 204);
					}
				}

				.get-code {
					position: absolute;
					right: 24rpx;
					bottom: 34rpx;
					z-index: 10;
					padding-left: 24rpx;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 28rpx;
					color: #FF4629;
					// &.color-297EFF {
					// 	color: #297EFF;
					// }

					// &.arrow {
					// 	padding: 0;
					// 	width: 28rpx;
					// 	height: 28rpx;
					// }
				}
			}

			.submit_btn {
				// margin-top: 48rpx;
				// margin-bottom: 18rpx;
				width: 95%;
				margin: 48rpx auto 24rpx auto;
				line-height: 96rpx;
				background: linear-gradient(135deg, #FF8533 0%, #FF0011 100%);
				border-radius: 48rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 600;
				color: #FFFFFF;
			}
		}

		.bottom_box {
			width: 95%;
			margin: 24rpx auto;
			padding-bottom: 36rpx;
			text-align: center;
			
			p{
				margin-bottom: 12rpx;
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 28rpx;
				color: #292929;
				line-height: 44rpx;
				text-align: center;
				font-style: normal;
			}
			
			.image1 {
				width: 100%;
				height: 316rpx;
			}

			.image3,
			.image2 {
				width: 100%;
				height: 1040rpx;
				margin-top: 36rpx;
			}

			.image3 {
				margin-top: 24rpx;
			}
		}
	}

	@media only screen and (min-width: 750px) {
		.w {
			width: 1200px;
			margin: auto;

			.top-bg {
				width: 100%;
				height: 95vh;
			}

			.bottom_box {
				.image1 {
					object-fit: cover;
					height: 430px;
				}
			}
		}
	}
</style>